import React, {useState} from 'react';
import {LeftOutlined, UploadOutlined, UserOutlined, VideoCameraOutlined,} from '@ant-design/icons';
import {Layout, Menu, MenuProps} from 'antd';
import {useUserInfoStore} from "@/store/BaseStore.ts";
import {createStyles} from "antd-style";
import {Outlet, useNavigate} from "react-router-dom";
import UserLoginModal from "@/components/UserLoginModal.tsx";

const {Header, Sider, Content} = Layout;

type MenuItem = Required<MenuProps>['items'][number];

const useStyles = createStyles(({css, token}) => {
    const collapsedWidth = '80'

    return {
        container: css`
            height: 100vh;
            width: 100vw;
        `,
        siderAvatar: css`
            font-size: 30px;
            line-height: ${collapsedWidth}px;
            white-space: nowrap;
            display: grid;
            overflow: hidden;
            grid-template-columns: ${collapsedWidth}px 1fr;

            .nick-name {
                width: 100px;
                margin-left: 5px;

                p {
                    width: fit-content;
                    animation-name: text-scroll;
                    animation-fill-mode: forwards;
                    animation-iteration-count: infinite;
                    animation-timing-function: ease-in-out;
                    animation-direction: alternate;
                    animation-duration: 5s;
                    animation-delay: .5s;
                    animation-play-state: running;
                    line-height: ${collapsedWidth}px;
                    vertical-align: center;

                    :hover {
                        animation-play-state: paused;
                    }
                }
            }

            .avatar {
                display: grid;
                place-content: center;
                z-index: 1;
                :hover {
                    cursor: pointer;
                }
                img {
                    width: ${collapsedWidth}px;
                    height: ${collapsedWidth}px;
                    object-position: center;
                    object-fit: cover;
                }
            }
        `,
    }
})

const UserPage: React.FC = () => {
    const [collapsed, setCollapsed] = useState(true);
    const [loginModalOpen, setLoginModalOpen] = useState(false)
    const styles = useStyles().styles;
    const userInfo = useUserInfoStore(state => state.userInfo);
    const navigate = useNavigate();

    const getItem = (
        key: number | string,
        label: React.ReactNode,
        icon?: React.ReactNode,
        admin?: boolean,
        onClick?: () => void
    ): MenuItem => {
        if (admin) {
            if (!userInfo || userInfo.userType != "Admin") {
                return null;
            }
        }

        const click = () => {
            onClick()
        }
        return {
            key,
            icon,
            label,
            onClick: click
        } as MenuItem;
    }

    const menuItems = [
        getItem(
            1,
            '个人页面',
            <UserOutlined/>,
            false,
            () => {
                navigate('./')
            }
        ),
        getItem(
            2,
            '用户控制',
            <VideoCameraOutlined/>,
            true,
            () => {
                navigate('./userControl')
            }
        ),
        getItem(
            3,
            '文件控制',
            <UploadOutlined/>,
            false,
            () => {
                navigate('./objControl')
            }
        ),
        getItem(
            99,
            '返回主页',
            <LeftOutlined />,
            false,
            () => {
                navigate('/')
            }
        ),
    ]

    return (
        <Layout className={styles.container}>
            <Sider trigger={null}
                   collapsible
                   collapsed={collapsed}
                   onMouseOver={() => {
                       setCollapsed(false)
                   }}
                   onMouseLeave={() => {
                       setCollapsed(true)
                   }}
                   style={{
                       display: "flex",
                       flexDirection: "column"
                   }}
            >
                <div className={styles.siderAvatar}
                     onClick={() => {
                         setLoginModalOpen(true)
                     }}
                >
                    <div className="avatar" >
                        {
                            userInfo && userInfo.avatar ?
                                <img src={userInfo.avatar} alt="头像"/> :
                                <UserOutlined/>
                        }
                    </div>
                    <div className="nick-name">
                        <p>{
                            userInfo && userInfo.nickName ?
                                userInfo.nickName :
                                "请登录"
                        }</p>
                    </div>
                </div>
                <Menu
                    theme="dark"
                    mode="inline"
                    defaultSelectedKeys={['1']}
                    items={menuItems}
                />
            </Sider>
            <Layout>
                <Content>
                    <Outlet/>
                </Content>
            </Layout>
            <UserLoginModal open={loginModalOpen} setOpen={setLoginModalOpen}/>
        </Layout>
    )
}

export default UserPage